<template>
	<!-- 仿天猫首页二级页面跳转tap -->
	<view class="contain">
		<view class="main">
			<view class="nav" v-if="navListLoading">
				<swiper class="swiper-container with-transition" :style="'height:' + navSwiperH + 'rpx;'" @change="onSwiperChange">
					<swiper-item v-for="(items, index) in navList" :key="index">
						<view class="row-wrap">
							<view v-for="(item, index) in items" :key="index" class="nav-item">
								<view @tap="tapMenu(item.classifyName, item.id)" class="nav-text">
									<image class="nav-icon" :src="path + item.classifyIcon"></image>
									<view class="nameText">{{ item.classifyName }}</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="nav-title-icon">
					<view v-for="(items, index) in navList">
						<view :class="['title-icon', navIndex == index ? 'title-icon2' : '']" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/index.js';
const swiperH = 187;
export default {
	name: 'x-swiper-nav',
	props: {
		navList: {
			type: Array,
			required: true // 设置为必传
		},
		navListLoading: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			path: api.getPath(),
			navIndex: 0
		};
	},
	computed: {
		navSwiperH() {
			// 确保navList存在并且有当前索引的项
			if (this.navList && this.navList[this.navIndex]) {
				return this.navList[this.navIndex].length > 4 ? 2 * swiperH : swiperH;
			}
			return swiperH; // 默认值
		}
	},
	methods: {
		onSwiperChange(event) {
			this.navIndex = event.detail.current;
		},
		tapMenu(name, id) {
			uni.navigateTo({
				url: '/pages/index/secondary/secondary?name=' + name + '&id=' + id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.contain {
	margin-top: 30rpx;
	.main {
		position: relative;
		z-index: 9;
		padding: 0 20rpx;

		.nav {
			position: relative;
			border-radius: 14rpx;
			background-color: #fff;

			.swiper-container {
				/* 默认禁用过渡 */
				transition: none;
			}
			/* 启用高度过渡效果 */
			.swiper-container.with-transition {
				transition: height 0.3s ease-in-out;
			}

			.row-wrap {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}

			.nav-title-icon {
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.title-icon {
					width: 15rpx;
					height: 15rpx;
					border-radius: 8rpx;
					margin: 0 10rpx;
					background-color: #797a79;
				}
				.title-icon2 {
					width: 38rpx;
					background-color: red;
					transition: width 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.4s ease, transform 0.3s ease;
				}
			}

			.nav-item {
				width: 25%;
				margin-top: 30rpx;
				margin-bottom: 20rpx;

				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.nav-text {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.nav-icon {
						width: 84rpx;
						height: 84rpx;
						margin-bottom: 15rpx;
						border-radius: 10rpx;
					}

					.nameText {
						width: 130rpx;
						display: -webkit-box;
						-webkit-line-clamp: 1; /* 限制为两行 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;

						font-size: 24rpx;
						text-align: center;
					}
				}
			}

			.dots {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 20rpx;
				display: flex;

				.dot {
					width: 10rpx;
					height: 6rpx;
					border-radius: 6rpx;
					margin-right: 10rpx;
					background-color: rgba(255, 44, 60, 0.4);

					&.active {
						width: 20rpx;
						background-color: $-color-primary;
					}
				}
			}
		}

		.information {
			height: 76rpx;
			box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.06);
			padding: 0 20rpx;
			box-sizing: border-box;
			border-radius: 14rpx;

			.news {
				position: relative;

				.shade {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 100;
				}
			}

			.icon-toutiao {
				width: 114rpx;
				height: 34rpx;
			}

			.gap-line {
				height: 28rpx;
				width: 1px;
				background-color: #dcdddc;
				margin: 0 30rpx;
			}
		}

		.seckill {
			.dec {
				background-color: #fffbdb;
				width: 150rpx;
			}
		}

		.hot,
		.new-goods {
			.title-image {
				width: 144rpx;
				height: 55rpx;
			}
		}
	}
}
</style>
